<template>
    <QfPage title="资讯管理">
        <template #hd>
            <el-row>
                <el-col :span="12">
                    <el-button type="primary" @click="dialogVisible = true">新增</el-button>
                </el-col>
                <el-col :span="12">
                    <el-input v-model="keyword" placeholder="请输入搜索的编号" />
                </el-col>
            </el-row>


            <!-- {{ keyword }} -->
            <!-- <el-button @click="getData">点击</el-button> -->


            <!-- 分页器 -->
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :page-sizes="[10, 20, 30, 40]" :page-size="limit" layout="total, sizes, prev, pager, next, jumper"
                prev-text="上一页" next-text="下一页" :total="length">
            </el-pagination>
            <!-- 分页器结束 -->
        </template>
        <template #ct>
            <el-table :data="tableData" style="width: 100%" :default-sort="{ prop: 'time', order: 'descending' }">
                <el-table-column type="selection" width="55px" />
                <el-table-column type="index" label="编号" width="55px">
                    <template #default="scope">
                        {{ scope.$index + 1 }}
                    </template>
                </el-table-column>
                <!-- <el-table-column prop="type" label="分类" /> -->
                <el-table-column prop="type" label="分类" :filters="[
                    { text: '楼盘动态', value: '楼盘动态' },
                    { text: '房产咨询', value: '房产咨询' },
                    { text: '政策解读', value: '政策解读' },
                ]" :filter-method="filtersType">
                    <template #default="scope">
                        <el-tag
                            :type="scope.row.type === '楼盘动态' ? '' : scope.row.type === '房产咨询' ? 'warning' : 'danger'">
                            {{ scope.row.type }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="img" label="封面">
                    <template #default="scope">
                        <img :src="scope.row.img" alt="图片丢失" style="width: 100px;height: 100px" />
                    </template>
                </el-table-column>


                <el-table-column prop="title" label="标题" />
                <el-table-column prop="state" label="状态" :filters="[
                    { text: '已发布', value: '已发布' },
                    { text: '草稿', value: '草稿' },
                ]" :filter-method="filterState">
                    <template #default="scope">
                        <el-tag :type="scope.row.state === '已发布' ? '' : 'success'" disable-transitions>{{
                                scope.row.state
                        }}</el-tag>
                    </template>

                </el-table-column>
                <el-table-column prop="publisher" label="发布者" />
                <el-table-column prop="time" label="发布时间" sortable />
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button size="small" @click="handleEdit(scope)">修改</el-button>
                        <!-- <el-popconfirm title="真的要删除吗?">
                            <template #reference>
                                <el-button size="small" type="danger" @click="handleDelete(scope)">删除</el-button>
                            </template>
                        </el-popconfirm> -->
                        <el-button size="small" type="danger" @click="handleDelete(scope)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 增加弹窗开始 -->
            <el-dialog v-model="dialogVisible" title="新增资讯" width="45%" draggable>
                <el-form :model="form" label-width="120px" ref="form">
                    <!-- <el-form-item label="编号" prop="noValue">
                        <el-input v-model="form.noValue" />
                    </el-form-item> -->
                    <!-- <el-form-item label="分类">
                        <el-input v-model="form.placeholder" />
                    </el-form-item> -->
                    <el-select v-model="form.placeholder" placeholder="请选择分类">
                        <el-option v-for="item in optionsType" :key="item.value" :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                    <!-- 图片添加待完成 -->
                    <el-form-item label="标题" prop="titleValue">
                        <el-input v-model="form.titleValue" />
                    </el-form-item>

                    <el-select v-model="form.stateValue" placeholder="请选择">
                        <el-option v-for="item in optionsState" :key="item.value" :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>

                    <!-- 发布者 -->
                    <el-form-item label="发布者" prop="publisherValue">
                        <el-input v-model="form.publisherValue" />
                    </el-form-item>
                    <!-- 时间 -->
                    <div class="block">
                        <span class="demonstration">时间发布</span>
                        <el-date-picker v-model="form.dateValue1" type="date" placeholder="选择日期" format="YYYY-MM-DD"
                            value-format="YYYY-MM-DD">
                        </el-date-picker>
                    </div>
                </el-form>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="abrogate">取消</el-button>
                        <el-button type="primary" @click="dialog('form')">
                            确定
                        </el-button>
                    </span>
                </template>
            </el-dialog>
            <!-- 增加弹窗结束 -->
            <!-- 修改抽屉开始 -->
            <el-drawer v-model="visible" :show-close="false">
                <el-form :model="drawerForm" label-width="120px" ref="drawerForm">
                    <!-- <el-form-item label="编号">
                        <el-input v-model="drawerForm.noValue" />
                    </el-form-item> -->
                    <!-- <el-form-item label="分类">
                        <el-input v-model="drawerForm.placeholder" />
                    </el-form-item> -->
                    <el-select v-model="drawerForm.placeholder" placeholder="请选择分类">
                        <el-option v-for="item in optionsType" :key="item.value" :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                    <el-form-item label="标题">
                        <el-input v-model="drawerForm.titleValue" />
                    </el-form-item>

                    <el-select v-model="drawerForm.stateValue" placeholder="请选择状态">
                        <el-option v-for="item in optionsState" :key="item.value" :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>

                    <!-- 发布者 -->
                    <el-form-item label="发布者">
                        <el-input v-model="drawerForm.publisherValue" />
                    </el-form-item>
                    <!-- 时间 -->
                    <div class="block">
                        <span class="demonstration">时间发布</span>
                        <el-date-picker v-model="drawerForm.dateValue1" type="date" placeholder="选择日期"
                            format="YYYY-MM-DD" value-format="YYYY-MM-DD">
                        </el-date-picker>
                    </div>
                </el-form>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="abrogateDrawer">取消</el-button>
                        <el-button type="primary" @click="confirmDrawer('form')">
                            确定
                        </el-button>
                    </span>
                </template>
            </el-drawer>

        </template>

        <template #ft>本项目由千峰H2208陈天明出版</template>

    </QfPage>
</template>

<script>
import { defineComponent } from 'vue';
import axios from 'axios';
import info from '@/api/http/infos';
import { ElMessage } from 'element-plus';

export default defineComponent({
    data() {
        return {
            keyword: '',//关键字
            drawerId: null,//数据id
            dialogVisible: false,//弹窗开关
            visible: false,//抽屉开关
            tableData: [],//表格数据
            limit: 10,//每页显示10条数据
            length: 1,//数据总数
            page: 1,//默认页数
            optionsState: [
                {
                    value: '已发布',
                    label: '已发布'
                },
                {
                    value: '草稿',
                    label: '草稿'
                }
            ],
            optionsType: [
                {
                    value: '楼盘动态',
                    label: '楼盘动态'
                },
                {
                    value: '房产咨询',
                    label: '房产咨询'
                },
                {
                    value: '政策解读',
                    label: '政策解读'
                }
            ],
            form: {
                dateValue1: '', // 弹窗的时间value
                stateValue: '',//弹窗的状态value
                titleValue: '',//弹窗的标题value
                publisherValue: '',//弹窗的发布者的val
                placeholder: ''//分类
            },
            drawerForm: {
                dateValue1: '', // 弹窗的时间value
                stateValue: '',//弹窗的状态value
                titleValue: '',//弹窗的标题value
                publisherValue: '',//弹窗的发布者的val
                placeholder: ''//分类
            }

        }
    },
    created() {
        this.getData()//获取数据
    },
    watch: {
        keyword() {
            //当数据发生变化时重新获取数据
            this.getData()//获取数据
        }
    },
    methods: {
        // 获取行业资讯总数据
        async getData() {
            // const withtitle = this.keyword ? `title=${this.keyword}` : '';
            // const res = await axios.get(`/info/?${withtitle}`);
            const res = await info.paging({ keyword: this.keyword, $limit: this.limit })
            console.log('res', res);
            const { status, data } = res;
            //在请求成功得到内容之后，修改表格数据源
            if (status === 200) {
                this.tableData = data.data
                this.length = data.data.length
            }
            console.log('length', this.length);
        },
        // info.getInof();
        //分类筛选
        filtersType(value, row) {
            return row.type === value;
        },
        //状态筛选
        filterState(value, row) {
            return row.state === value;
            // console.log(value);
        },
        //新增 - 时间禁用
        // disabledDate(time) {
        //     return time.getTime() > Date.now();
        // },
        // 添加
        async dialog(formName) {
            const res = await axios.post('/info/addinfo', {
                time: this.form.dateValue1,
                state: this.form.stateValue,
                no: this.form.noValue,
                title: this.form.titleValue,
                publisher: this.form.publisherValue,
                type: this.form.placeholder
                // ...this.form
            });

            // console.log("添加", res);
            const { status, data } = res;
            if (!status === 200)
                return ElMessage.error('添加失败');
            ElMessage({
                message: '添加成功',
                type: 'success',
            })
            this.$refs[formName].resetFields();
            this.dialogVisible = false//关闭弹窗
            this.getData()//重新获取数据

            return res

        },
        abrogate() {
            this.dialogVisible = false//关闭弹窗
        },
        // 修改
        handleEdit(scope) {
            this.visible = true;
            // console.log(scope.row);
            // const { _id, img, origin, ...rest } = scope.row
            //获取选中的信息
            this.drawerId = scope.row._id
            this.drawerForm.titleValue = scope.row.title;
            this.drawerForm.dateValue1 = scope.row.time;
            this.drawerForm.stateValue = scope.row.state;
            this.drawerForm.publisherValue = scope.row.publisher;
            this.drawerForm.placeholder = scope.row.type
        },
        // 取消
        abrogateDrawer() {
            this.visible = false
        },
        // 确定
        async confirmDrawer() {
            console.log("drawerForm", this.drawerForm);
            console.log("scope.row._id", this.drawerId);
            const res = await axios.post('/info/editinfo/', {
                key: this.drawerId,
                // title: "5151511"
                // ...this.drawerForm
                type: this.drawerForm.placeholder,
                publisher: this.drawerForm.publisherValu,
                state: this.drawerForm.stateValue,
                time: this.drawerForm.dateValue1,
                title: this.drawerForm.titleValue
            });
            console.log("res", res);
            const { status } = res;
            if (!status === 200) return ElMessage.error('修改失败');
            ElMessage({
                message: '修改成功',
                type: 'success',
            })
            this.getData();//重新获取数据
            this.visible = false;//关闭抽屉
            return res
        },
        // handleDelete(scope) {
        //     console.log("scope.row._id", scope.row._id);
        // },
        //删除功能
        handleDelete(scope) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                const res = await axios.post("/info/del/" + scope.row._id);
                console.log("this.drawerId", scope.row._id);
                const { status } = res;
                if (!status === 200) return ElMessage.error('删除失败');
                ElMessage({
                    message: '删除成功',
                    type: 'success',
                })
                return this.getData();
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        //分页
        handleSizeChange(sizes) {
            console.log(sizes);
        },
        handleCurrentChange(page) {
            console.log(page);
        }
    }



})
</script>